import { connect, Link } from 'umi';
import { Form, Input, Button, InputNumber } from 'antd';
import './employee.css';

function Employee({ dispatch }) {
  const [form] = Form.useForm();
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  function submit() {
    const newEmployee = {
      firstName: form.getFieldValue('firstName'),
      lastName: form.getFieldValue('lastName'),
      age: form.getFieldValue('age'),
      address: form.getFieldValue('address'),
    };
    dispatch({
      type: 'employeeList/add',
      employee: newEmployee,
    });
  }
  return (
    <Form {...layout} form={form} name="basic" className="employee">
      <Form.Item
        label="FirstName"
        name="firstName"
        rules={[{ required: true, message: 'Please input your firstName!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="LastName"
        name="lastName"
        rules={[{ required: true, message: 'Please input your lastName!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Age"
        name="age"
        rules={[{ required: false, message: 'Please input your Age!' }]}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item
        label="Address"
        name="address"
        rules={[{ required: false, message: 'Please input your address!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit" onClick={() => submit()}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

export default connect(({ employeeList }) => ({ employeeList }))(Employee);

// function EmployeeList({ list, dispatch }) {
//   const { Column, ColumnGroup } = Table;
//   useEffect(() => {
//     dispatch({
//       type: 'list/getAll',
//     });
//   }, []);

//   function deleteList(key) {
//     dispatch({
//       type: 'list/delList',
//       key: key,
//     });
//   }

//   return (
//     <div>
//       <h1>List Page</h1>
//       <Table dataSource={list}>
//         <ColumnGroup title="Name">
//           <Column title="First Name" dataIndex="firstName" key="firstName" />
//           <Column title="Last Name" dataIndex="lastName" key="lastName" />
//         </ColumnGroup>
//         <Column title="Age" dataIndex="age" key="age" />
//         <Column title="Address" dataIndex="address" key="address" />
//         <Column
//           title="Tags"
//           dataIndex="tags"
//           key="tags"
//           render={(tags) => (
//             <>
//               {tags.map((tag) => (
//                 <Tag color="blue" key={tag}>
//                   {tag}
//                 </Tag>
//               ))}
//             </>
//           )}
//         />
//         <Column
//           title="Action"
//           key="action"
//           render={(text, record) => (
//             <Space size="middle">
//               <a>Invite {record.lastName}</a>
//               <a onClick={() => deleteList(text.key)}>Delete</a>
//             </Space>
//           )}
//         />
//       </Table>
//     </div>
//   );
// }
// export default connect(({ list }) => ({ list }))(EmployeeList);
